<template>
	<div class="chooseCarsType">
		<div class="search-box search-box-bg">
	        <div class="search-cont">
	            <p class="qpmall-logo qpmall-logo2" style="width:10%;">
	            	<a id="go" href="javascript:history.go(-1);">
	            		<img src="./btn_back_icon.png">
	            	</a>
	            </p>
	            <p class="inp" style="width:90%;font-size:1.2em;color:#fff;line-height:30px;height: 30px;">选车型</p>
	        </div>
	    </div>
	    <div class="navCar container-fluid">
		    <div class="row">
		        <div class="textCent col-xs-6">
		            <span id="sel_vin_btn"  v-bind:class="{'nav_selectCar':isTrue}" @click="back()">选车型</span>
		        </div>
		        <div class="textCent col-xs-6">
		            <span id="sel_hand_btn" v-bind:class="{'nav_selectCar':isFalse}" @click="change()">手动选委屈为驱蚊器翁群翁群翁群翁车型</span>
		        </div>
		    </div>
		</div>
		<div class="vinBox" v-show="x">
		    <div class="vinSearch">
		        <input type="text" id="selectV" placeholder="请在此处输入VIN码" maxlength="17">
		        <button class="btn_search btn_search2"></button>
		        <span id="errmsg" style="color: red;"></span>
		    </div>
		    <div class="selec">
		        <h3><i></i>历史记录</h3>
		        <ul id="selectRecode"></ul>
		    </div>
		</div>
		<div class="handBox" v-show="y">
		       <div class="manual_car rel">
		           <div class="sidebar_l fix">
		               <ul>
		                   <li><label class="selected clr">品牌</label></li>
		                   <li><label :class="{selected:selected,clr:clr}">车型</label></li>
		                   <li><label :class="{selected:sel,clr:clrs}">年款</label></li>
		                   <li><label :class="{selected:sels,clr:clrss}"><span>排档版本</span></label></li>
		               </ul>
		           </div>
		           <div class="sidebar_r fix">
		               <div class="block">
		                   <div class="selcar selcar1" v-for="a in index" v-show="q">
		                   	<hgroup>
		                   		<h3>{{a.key}}</h3>
		                   		<ul>
		                   			<li v-for="s in a.value" @click="getSecondData(s.autoBrandID)">{{s.autoBrandID}}</li>
		                   		</ul>
		                   	</hgroup>
		                   </div>
		                   <div class="selcar selcar2" v-show="p">
		                       <hgroup v-for="(a,v) in detail" v-show="l">
		                           <h3>
		                           	{{ v }}
		                           </h3>
		                           <ul>
										<li v-for="ss in a" @click="getSDatas(ss.autoSystemID)">{{ss.auto_style_system}}</li>
		                           </ul>
		                       </hgroup>
		                       <hgroup v-show="m">
		                           <h3>
		                           	{{ tha }}
		                           </h3>
		                           <ul v-for="(b,c) in secondmess">
										<li @click="getYears(b.autoTypeID)">{{ b.auto_style_type }}</li>
		                           </ul>
		                       </hgroup>
		                   </div>
		                   <div class="selcar selcar3" v-show="aa">
		                       <hgroup>
		                           <h3>{{ tha }}</h3>
		                           <ul>
		                               <li v-for="(a,v) in years" @click="getCarsType(a.autoYearID)">{{v}} 款（{{a.auto_style_productive_year}}-{{a.auto_style_stop_production}}）</li>
		                           </ul>
		                       </hgroup>
		                   </div>
		                   <div class="selcar selcar4" v-show="bb">
		                       <hgroup>
		                           <h3>{{ tha }}</h3>
		                           <ul>
		                               <li v-for="(a,c) in carsType"> {{a.auto_style_sales_name}} </li>
		                           </ul>
		                       </hgroup>
		                   </div>
		               </div>
		           </div>
		       </div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				'isTrue':true,
				"isFalse":false,
				x:true,
				y:false,
				q:true,
				p:false,
				l:true,
				m:false,
				selected:false,
				clr:false,
				index:[],
				detail:[],
				secondmess:[],
				tha:"",
				aa:false,
				years:"",
				sel:false,
				clrs:false,
				carsType:[],
				sels:false,
				clrss:false,
				bb:false
			}
		},
		mounted(){
			this.getData();
		},
		methods:{
			change(){
				
					this.isTrue = false,
					this.isFalse = true,
					this.x = false,
					this.y = true
			},
			back(){
				this.isTrue = true,
				this.isFalse = false,
				this.x = true,
				this.y = false
			},
			getData(){
				var that = this
				this.$http.get('https://www.qpmall.com/web-open/getAllBrands.htm').then(function(res){
					that.index = res.data
				})
			},
			getSecondData(tet){
				var that = this;
				that.q=false;
				that.p=true;
				that.selected = true;
				that.clr = true;
				that.tha = tet;
				this.$http.get('https://www.qpmall.com/web-open/getAutoStyleBrand.htm?autoBrandID='+tet).then(function(res){
					that.detail = res.data
				})
			},
			getSDatas(tet){
				var that = this;
				that.l = false;
				that.m = true;
				this.$http.get('https://www.qpmall.com/web-open/getAutoType.htm?autoSystemID='+tet).then(function(res){
					that.secondmess = res.data
				})
			},
			getYears(tet){
				var that = this;
				that.p = false;
				that.aa = true;
				that.sel = true;
				that.clrs = true;	
				this.$http.get('https://www.qpmall.com/web-open/getAutoProductiveYearBean.htm?autoTypeID='+tet).then(function(res){
					that.years = res.data;
				})
			},
			getCarsType(tet){
				var that = this;
				that.bb = true;
				that.aa = false;
				that.sels = true;
				that.clrss = true;
				this.$http.get('https://www.qpmall.com/web-open/getAutoParameter1Bean.htm?autoYearID='+tet).then(function(res){
//					console.log(res.data);
					that.carsType = res.data;
				})
			}
		}
	}
</script>

<style scoped>
	.dis {
	    display: none;
	}
	.search-box-bg {
	    background: #F6AB00;
	}
	.search-box {
	    position: fixed;
	    width: 100%;
	    height: 46px;
	    z-index: 100;
	    top: 0;
	    left: 0;
	}
	.search-cont {
	    height: 46px;
	}
	.search-cont p {
	    text-align: center;
	}
	.qpmall-logo {
	    float: left;
	}
	.qpmall-logo2 img {
		margin-top: 0.6em;
	    width: 1em;
	    height: 1.6em;
	}
	.qpmall-logo img {
	    max-width: 5.2em;
	}
	.inp {
		margin-top: 8px;
	    float: left;
	    position: relative;
	    overflow: hidden;
	}
	.navCar {
	    border-bottom: 1px solid #EBEBEB;
	    position: fixed;
	    top: 50px;
	    width: 100%;
	    background-color: #fff;
	}
	.container-fluid {
	    margin-right: auto;
	    margin-left: auto;
	    padding-left: 0px;
	    padding-right: 0px;
	    z-index: 1;
	}
	.row {
	    margin: 0;
	    padding: 0;
	}
	.textCent {
	    text-align: center;
	    height: 40px;
	    line-height: 40px;
	}
	.col-xs-6 {
	    width: 50%;
	    float: left;
	    position: relative;
	    min-height: 1px;
	}
	.navCar span {
	    display: inline-block;
	    height: 40px;
	    min-width: 140px;
	    font-size: 16px;
	    background-repeat: no-repeat;
	    background-position: 30px center;
	    background-size: 20px;
	    text-indent: 2em;
	}
	#sel_vin_btn {
	    background-image: url(./qp_cvi.png);
	}
	.nav_selectCar {
	    color: #F7AB01;
	    border-bottom: 2px solid #F7AB01;
	}
	#sel_hand_btn {
	    background-image: url(./qp_csx.png);
	    background-position: 20px center;
	}
	.vinSearch {
	    width: 96%;
	    margin: 120px auto;
	    position: relative;
	}
	.vinBox input {
	    width: 100%;
	    height: 50px;
	    border: 1px solid #F6AB00;
	    background: #fff;
	    text-indent: 1em;
	    border-radius: 4px;
	    outline: none;
	}
	.btn_search2 {
		position: absolute;
		outline: none;
	    height: 54px;
	    width: 20%;
	    background: #F6AB00 url(./search.png) no-repeat center center;
	    background-size: auto 50%;
	    right: -2px;
	    top: 0;
	    border-radius: 0 4px 4px 0;
	    border: none;
	}
	.selec {
	    max-height: 230px;
	    width: 90%;
	    margin: 0 auto;
	    margin-bottom: 80px;
	    overflow: hidden;
	}
	.selec h3 {
	    font-size: 18px;
	    margin-top: 20px;
    	margin-bottom: 10px;
	}
	.selec h3 i {
	    float: left;
	    width: 30px;
	    height: 22px;
	    margin-right: 10px;
	    background: url(./bg.png) no-repeat -45px 0;
	    background-size: 160px;
	}
	.handBox {
	    /*display: none;*/
	    margin-top: 30px;
	}
	.rel {
	    position: relative;
	}
	.manual_car .sidebar_l {
	    width: 90px;
	    padding-bottom: 80px;
	    background: #ECEBE9;
	    position: fixed;
	    top: 90px;
	    bottom: 0;
	    border-right: 1px solid #eee;
	}
	.manual_car .sidebar_l li {
	    height: 80px;
	    line-height: 80px;
	    text-align: center;
	    border-bottom: 1px solid #EAEAEA;
	    background: #F4F4F4;
	    position: relative;
	}
	.manual_car .sidebar_l li label.clr {
	    color: #F8C025;
	}
	.manual_car .sidebar_l li label.selected {
	    background: #fff;
	    z-index: 1;
	}
	.manual_car .sidebar_l li label {
	    width: 100%;
	    font-weight: 600;
	    color: #999;
	    position: absolute;
	    left: 0;
	    top: 0;
	}
	.clr {
	    clear: both;
	}
	label {
	    display: inline-block;
	    max-width: 100%;
	    margin-bottom: 5px;
	    font-weight: bold;
	}
	
	label {
	    cursor: default;
	}
	.manual_car .sidebar_l li span {
	    display: inline-block;
	    width: 36px;
	    line-height: 20px;
	    margin-top: 20px;
	}
	.manual_car .sidebar_r {
	    left: 90px;
	    right: 0;
	    top: 80px;
	    bottom: 0;
	    overflow: auto;
	    box-shadow: -2px 4px 10px rgba(0,0,0,.1);
	    background: #fff;
	    padding-bottom: 80px;
	}
	.manual_car .sidebar_r .block {
	    width: 80%;
	    /*margin: 0 auto;*/
	    margin-left: 20%;
	    margin-top: 70px;
	}
	.manual_car .sidebar_r hgroup {
	    margin-top: 20px;
	}
	.manual_car .sidebar_r hgroup h3 {
	    width: 80%;
	    text-indent: 0.5em;
	    color: #F8C025;
	    margin-left: 13%;
	    font-size: 16px;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    -o-text-overflow: ellipsis;
	    overflow: hidden;
	}
	.manual_car .sidebar_r hgroup li {
	    width: 80%;
	    height: 40px;
	    line-height: 40px;
	    text-align: center;
	    margin-top: 10px;
	    margin-left: 13%;
	    border: 1px solid #efefef;
	    border-radius: 4px;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    -o-text-overflow: ellipsis;
	    overflow: hidden;
	}
	
	body{
		padding-bottom: 0!important;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</style>